import { Tooltip } from '@arco-design/web-react';
import cs from 'classnames';
import { useMemo } from "react";
import { ExtraColor } from '.';
import styles from './TableCellExtra.module.scss';

interface IProps {
    /** 放置位置 */
    placement: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
    /** 额外信息展示 */
    children: React.ReactNode;
    /** 额外展示信息颜色 */
    color: ExtraColor;
}

const colorHashMap = {
    blue: '#165DFF',
    red: '#F53F3F',
    green: '#00B42A',
    yellow: '#F77234',
    gray: '#86909C'
};

/**
 * 表格项额外信息
 * @param props 
 * @returns 
 */
const TableCellExtra = (props: IProps) => {
    const { placement, children, color } = props;
    const cls = useMemo(() => {
        return cs({
            [styles[placement]]: true,
            [styles.cellExtra]: true
        });
    }, [placement]);

    const css: React.CSSProperties = {
        // @ts-ignore
        '--color': colorHashMap[color as keyof typeof colorHashMap] || color
      };

    return (
        <div style={css} className={cls}>
            <Tooltip mini content={children} >
                <div className={styles.extra}>{children}</div>
            </Tooltip>
        </div>
    );
}

export {
    TableCellExtra
};

